<template>
  <div class="app">
    <!-- 全局加载进度条 -->
    <LoadingProgress />
    
    <!-- 头部 -->
    <HeaderComponent @tabChange="handleTabChange" />
    
    <!-- 主体内容 - 使用绝对定位的方式切换，不影响布局 -->
    <div class="page-container">
      <!-- 天眼视图页面 -->
      <div class="page-content" :class="{ 'page-active': currentTab === 'tianyan' }">
        <div class="mainbox">
          <ul class="clearfix nav1">
            <!-- 左侧指标和雷达图 -->
            <li style="width: 22%">
              <KeyIndicators />
              <RiskRadar />
            </li>
            
            <!-- 中间地图 -->
            <li style="width: 56%">
              <MapComponent />
            </li>
            
            <!-- 右侧资产质量与风险暴露 -->
            <li style="width: 22%">
              <BusinessGrowth />
            </li>
          </ul>
          
          <!-- 底部统计图表 -->
          <div class="box" style="padding: 0;">
            <ul class="clearfix nav2">
              <li style="width:25%">
                <BusinessComparison />
              </li>
              <li style="width:50%">
                <CompletionRate @showDetail="handleShowDetail" />
              </li>
              <li style="width:25%">
                <ModelDistribution />
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- 人员画像页面 -->
      <div class="page-content" :class="{ 'page-active': currentTab === 'renyuan' }">
        <PersonnelPortraitPage v-if="currentTab === 'renyuan'" />
      </div>
      
      <!-- 资产质量页面 -->
      <div class="page-content" :class="{ 'page-active': currentTab === 'zichan' }">
        <AssetQualityAuditView v-if="currentTab === 'zichan'" />
      </div>
      
      <!-- 机构塑像页面 -->
      <div class="page-content" :class="{ 'page-active': currentTab === 'zhihang' }">
        <BranchProfile v-if="currentTab === 'zhihang'" />
      </div>
    </div>
    
    <!-- 详细项目列表弹窗 -->
    <ProjectDetailList 
      v-if="showDetailPanel"
      :projects="detailProjects"
      @close="handleCloseDetail"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

// Vue组件导入
import LoadingProgress from './components/LoadingProgress.vue'
import HeaderComponent from './components/HeaderComponent.vue'
import KeyIndicators from './components/KeyIndicators.vue'
import RiskRadar from './components/RiskRadar.vue'
import MapComponent from './components/MapComponent.vue'
import BusinessGrowth from './components/BusinessGrowth.vue'
import BusinessComparison from './components/BusinessComparison.vue'
import CompletionRate from './components/CompletionRate.vue'
import ModelDistribution from './components/ModelDistribution.vue'
import ProjectDetailList from './components/ProjectDetailList.vue'
import PersonnelPortraitPage from './components/PersonnelPortraitPage.vue'
import AssetQualityAuditView from './components/AssetQualityAuditView.vue'
import BranchProfile from './components/BranchProfileNew.vue'

// 当前选中的标签页
const currentTab = ref('tianyan')

// 详细列表状态
const showDetailPanel = ref(false)
const detailProjects = ref([])

// 处理标签页切换
const handleTabChange = (tab) => {
  currentTab.value = tab
  console.log('切换到标签页:', tab)
}

// 显示详细列表
const handleShowDetail = (projects) => {
  detailProjects.value = projects
  showDetailPanel.value = true
}

// 关闭详细列表
const handleCloseDetail = () => {
  showDetailPanel.value = false
}
</script>

<style scoped>
.app {
  height: 100vh;
  overflow: hidden;
}

/* 页面容器 - 使用相对定位 */
.page-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 90px); /* 减去头部高度 */
  overflow: hidden; /* 隐藏容器本身的溢出 */
}

/* 页面内容 - 使用绝对定位叠加 */
.page-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto; /* 添加垂直滚动条 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

/* 自定义滚动条样式 */
.page-content::-webkit-scrollbar {
  width: 8px;
}

.page-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.page-content::-webkit-scrollbar-thumb {
  background: rgba(0, 215, 233, 0.4);
  border-radius: 4px;
}

.page-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 215, 233, 0.6);
}

/* 激活的页面 */
.page-content.page-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* 占位页面样式 */
.placeholder-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
}

.placeholder-page h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.placeholder-page p {
  font-size: 18px;
  color: #8b9dc3;
}
</style>
